<template>
    <div id="p_mine">
        <blur :blur-amount=40 :url="headimg ||url" class="headArea">
            <!--  <div class="clearfix">
                <a href="#" class="shareQR">分享二维码</a>
                <div class="fun">
                    <a href="#" class="edit"></a>
                    <a href="#" class="set"></a>
                </div>
            </div> -->
            <!--  @click="doAuth()"  -->
            <p class="center head"><img :src="headimg ||url"></p>
            <p class="center loginBtn">
                <button v-show="!isLogin" @click="go('login')" class="weui-btn weui-btn_mini weui-btn_primary">点击登录</button>
                <!-- <button @click="doJump" class="weui-btn weui-btn_mini weui-btn_primary">测试</button> -->
            </p>
            <h2 v-show="isLogin" class="center name">{{username}}</h2>
        </blur>
        <group>
            <!-- <cell title="余额" is-link link="charge" :value="amount +'时'">
                <i slot="icon" class="icon iconfont icon-yue" style="color: #ff6600;"></i>
                <div class="badge-value" >
                </div>
            </cell> -->
            <cell title="账号安全" is-link link="bind">
                <i slot="icon" class="icon iconfont icon-anquan" style="color: #ff6600;"></i>
            </cell>
            <cell title="假装很忙(接电话)" @click.native="beCalled">
                <i slot="icon" class="icon iconfont icon-kefu" style="color: #ff6600;"></i>
            </cell>
            <!-- <cell title="通讯录" is-link link="contacts">
                <i slot="icon" class="icon iconfont icon-addressbook2-copy" style="color: #ff6600;"></i>
            </cell> -->
            <!-- 
            <cell title="个人资料" is-link link="mineInfo" value="88%">
                <i slot="icon" class="icon iconfont icon-yuangongjianli" style="color: #ff6600;"></i>
                <div class="badge-value" >
                </div>
            </cell> -->
        </group>
        <group>
            <!-- <a href="tel:0571-26288882">
                <cell title="客服中心" is-link value="0571-26288882">
                    <a :href="tel:{{ tel }}"> </a>
                    <i slot="icon" class="icon iconfont icon-kefu" style="color: #0894ec;"></i>
                </cell>
            </a> -->
            <cell title="反馈建议" is-link link="suggest">
                <i slot="icon" class="icon iconfont icon-xingchengmiaoshu" style="color: #0894ec;"></i>
            </cell>
            <cell title="我要合作" is-link link="cooperate">
                <i slot="icon" class="icon iconfont icon-hezuo" style="color: #0894ec;"></i>
            </cell>
            <!-- <cell title="更新日志" is-link link="https://7dtime.com/static/pro52sjqd/next.html">
                <i slot="icon" class="icon iconfont icon-gengxin" style="color: #0894ec;"></i>
            </cell> -->
            <cell title="关于我们" is-link link="aboutUs">
                <i slot="icon" class="icon iconfont icon-guanyu" style="color: #0894ec;"></i>
            </cell>
        </group>
        <group>
            <cell title="设置" is-link link="setting">
                <i slot="icon" class="icon iconfont icon-shezhi" style="color: #57c734;"></i>
            </cell>
        </group>
    </div>
</template>
<script>
import {
    Badge,
    Blur,
    Cell,
    CellBox,
    Group
} from 'vux'
import {
    mapState,
    mapActions
} from 'vuex'

import api from '../api';
import { taskAndTag } from "./mixin";
import { help } from "./mixinApp";

export default {
    components: {
        Badge,
        Blur,
        Cell,
        CellBox,
        Group
    },
    activated(){
        // this.$vux.slidegif.show();
        if(this.openid) return ;
        let url = window.location.href;
        let _this = this;
        // console.log("headimg:",this.headimg);
        if (!this.hasHead && this.is_weixin()) { //获取授权链接跳转
            api.authurl({
                url
            }).then(data => {
                if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});

                data = data.data;
                this.oauthurl = data;
                console.log(data);
            })
        }
        let code = this.GetRequest()["code"];
        if (code && !this.hasHead) {
            this.getuser(code);
        }
        // console.log("mine activated")
    },
    mounted: function() {
      // this.calc()
      // window.addEventListener('resize', this.calc)
    },
    watch:{
        "headimg":function(){
            var defaultUrl= '//cdns.7dtime.com/heads/';  // 9.jpg
            this.hasHead = this.headimg.indexOf(defaultUrl) ==-1 ;
        }
    },
    methods: {
        //配置页面函数，让页面放大缩小保证内容样式不变
        // calc (){
        //   const pageWidth = 3360,
        //         pageHeight = 1890
        //   const body = document.querySelector('body')
        //   body.style.width = `${pageWidth}px`
        //   body.style.height = `${pageHeight}px`
        //   const x = window.innerWidth / pageWidth
        //   const y = window.innerHeight / pageHeight
        //   body.style.transform = `scale(${x}, ${y})`
        // },
        dologin() {
            console.log("dologin:" + this.isLogin);
        },
        doAuth(e) {
            console.log("doAuth:",e);
            if(this.hasHead) return ; //已经授权登录过获取到用户数据了.
            if(this.openid) return ;
            if (!this.is_weixin()) { //!this.oauthurl
                return this.$vux.toast.show({text:'微信中登录' ,type: 'warn'});
            }
            window.location.href = this.oauthurl;
        },
        doJump() {
            let code = this.GetRequest()["code"];
            if (code && !this.hasHead) {
                this.getuser(code);
            }
        },
        beCalled(){
            if(!this.phone){
                let _this = this ;
                this.$vux.confirm.show({
                  title:"绑定电话",
                  content:"需要先输入您的电话号码,绑定手机后正常使用,点击确定开始绑定",
                  onCancel () {
                  },
                  onConfirm () {
                   _this.go("bind");
                  }
                })
                return ; // this.$vux.toast.show({text:'请绑定电话' ,type: 'warn'});
            }

            api.callme().then(data => {
                if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});

                data = data.data;
                this.$vux.toast.show({
                    text: "10秒内来电",
                    type: 'success'
                })

            })
        }
    },
    mixins: [taskAndTag,help],
    computed: {
        ...mapState({
            headimg: state => state.vux.headimg,
            isLogin: state => state.vux.isLogin,
            username: state => state.vux.username,
            amount: state => state.vux.amount,
            uid: state => state.vux.uid,
            openid: state => state.vux.openid,
            phone: state => state.vux.phone,
        })
    },
    data() {
        return {
            oauthurl: "",
            tel: "0571-26288882",
            url: "/static/z39h5/img/logo.png",
            hasHead:false,
        }
    }
}
</script>
<style scoped>


#p_mine .iconfont {
    font-size: 20px;
    margin-right: 15px;
}

#p_mine .loginBtn {
    padding: 0;
}

.group_1 .iconfont:before {
    color: 0xff0000;
}

.group_2 .iconfont:before {
    color: 0x00ff00;
}

.badge-value {
    display: inline-block!important;
}

.vertical-middle {
    vertical-align: middle;
}

.center {
    text-align: center;
    padding-top: 10px;
    color: #fff;
    /*font-size: 22px;*/
}

.head img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #ececec;
}

.headArea {
    padding: 8px;
    max-height: 130px;
}

.name {
    padding-top: 0;
    color: #000;
}

a.shareQR:before,
a.edit:before,
a.set:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    background: url(/static/z39h5/mine-icon.png) 50% no-repeat;
    background-size: cover;
}

a.set:before {
    background-image: url(/static/z39h5/mine-set.png);
}

a.shareQR {
    float: left;
    margin-top: 3px;
    font-size: 16px;
    color: #fff;
}

.fun a {
    margin: auto 5px;
}
</style>
